<template>
    <div>
        <nav-bar title="图片详情"></nav-bar>
        <h4 style="color: #26a2ff">图片详情可还好</h4>
        <span class="line"></span>
<!--        <ul>-->
<!--            <li>-->
<!--            <img :src="xiang.src" alt="">-->
        <div class="thumbs">
            <vue-preview :slides="share_xiang" @close="handleClose"></vue-preview>
        </div>
        <!--            </li>-->
<!--        </ul>-->
        <span class="line"></span>
        <p>烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦v水水水水水水水水水水水</p>
    </div>
</template>

<script>
    export default {
        name: "share_xiang",
        data(){
            return {
                share_xiang:[]
            }
        },
        methods: {
            handleClose () {
                console.log('点击了');
            }
        },
        created() {
            this.Ajax.get("getthumimages")
            .then(res=>{
                this.share_xiang=res.data.message;
                this.share_xiang.forEach((ele)=>{
                    ele.w=600;
                    ele.h=400;
                })
                // console.log(res);
            })
            .catch(err=>{
                console.log(err)
            })
        }
    }
</script>
<style scoped lang="less">
    .thumbs{
        /deep/ .my-gallery{   //deep深层作用选择器
            display: flex;
            flex-wrap:wrap;//默认换行
            figure{
                width: 47%;
                margin: 5px;
                img{
                    width: 100%;
                    box-shadow: 0 0 8px #999;
                    border-radius: 5px;
                }
            }
        }
    }
    .line {
        background-color: deeppink;
        width: 100%;
        height: 3px;
        display: block;
    }
</style>